<template>
  <!--  普查基础单元-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <div class="s-table">

            <!-- 条件筛选 -->
            <div class="page_filter">

              <el-input v-model="form.queryString" style="width: 300px" clearable placeholder="名称、编号...">
                <template slot="prepend">查询条件</template>
              </el-input>
              <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
            </div>
            <div class="page_main">
              <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">基础单元新增</el-button>
              <!-- table -->
              <div class="common_btnBox">
                <i class="iconfont iconzongshu icon-size"></i>
                总数：{{form.total}}
              </div>
              <el-table :data="tableList" border>
                <el-table-column label="序号" fixed width="80">
                  <template slot-scope="scope">
                    {{getIndex(scope.$index)}}
                  </template>
                </el-table-column>
                roadName
                <el-table-column prop="roadName" label="道路名称" min-width="140"></el-table-column>
                <el-table-column prop="unitNo"  label="编号" width="120"></el-table-column>
                <el-table-column prop="deptTreeName"  label="管理单位"  show-overflow-tooltip min-width="120"></el-table-column>
                <el-table-column prop="area" label="行政区" show-overflow-tooltip width="170"></el-table-column>
                <el-table-column prop="roadLevelName" label="道路等级" width="100"></el-table-column>

                <el-table-column prop="roadWayTypeName" label="路幅形式" width="100"></el-table-column>
                <el-table-column prop="split" label="分段数量" width="100"></el-table-column>
                <el-table-column prop="roadLength" label="道路总长" width="100">
                  <template slot-scope="scope">
                    {{scope.row.roadLength}}km
                  </template>
                </el-table-column>
                <el-table-column prop="investigateTime" label="普查时间" width="140">
                  <template slot-scope="scope">
                    {{scope.row.investigateTime|formatTimer()}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" min-width="120">
                  <template slot-scope="scope">
                    <el-button class="btn_edit" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                  </template>


                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                             :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
              </el-pagination>
            </div>
            <!-- 新增编辑弹窗 -->
            <el-drawer direction="rtl" :title="dialogTitle" :visible.sync="isShowDrawer" :close-on-click-modal="false"
                       size="40%">
              <!-- 具体form表单 -->
              <div class="drawerContent" id="baseForm">
                <table id="printJS-form1">
                  <tr>
                    <td class="td_15"><i style="color: red">*</i>普查日期</td>
                    <td class="td_35" :colspan="currentRow.id!==undefined?1:3">
                      <el-date-picker style="width: 200px"
                                      v-model="currentRow.investigateTime"
                                      type="date"
                                      placeholder="选择时间">
                      </el-date-picker>
                    </td>
                    <td class="td_15" v-if="currentRow.id!==undefined">
                      <i style="color: red">*</i>普查单元编号
                    </td>
                    <td class="td_35" v-if="currentRow.id!==undefined">
                      <el-input v-model.trim="currentRow.unitNo" disabled></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15"><i style="color: red">*</i>管理单位</td>
                    <td class="td_85" colspan="3">
                      <organization v-model="currentRow.deptTreeId" placeholder="选择管理单位"
                      ></organization>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15"><i style="color: red">*</i>道路名称</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.roadName"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15"><i style="color: red">*</i>行政区划位置</td>
                    <td class="td_85" colspan="3">
                      <region-unit v-model="currentRow.areaId" :key="currentRow.areaId"></region-unit>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">建设单位</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.buildUnit"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">权属单位</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.ownUnit" placeholder="输入名称"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">设计单位</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.designUnit" placeholder="输入名称"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">勘察单位</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.viewUnit"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">施工单位</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.constructionUnit"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">监理单位</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.supervisorUnit"></el-input>
                    </td>
                  </tr>

                  <tr>
                    <td class="td_15">养护单位</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.maintenanceUnit"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">道路等级</td>
                    <td class="td_85" colspan="3">
                      <el-radio-group v-model="currentRow.roadLevel" v-for="item in EnumRoadLevelList" :key="item.name">
                        <el-radio :label="item.code">{{item.name}}</el-radio>
                      </el-radio-group>
                      <span style="display: block;" v-if="currentRow.roadLevel==5">( <el-input
                        style="width: 90%;border-bottom: 1px solid gray;margin-bottom: 10px"
                        v-model.trim="currentRow.roadLevelOther"></el-input>)</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">设计时速</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.number="currentRow.speed" type="number"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">红线宽度</td>
                    <td class="td_35">
                      <el-input v-model.trim="currentRow.redLineWidthFrom"></el-input>
                    </td>
                    <td class="td_15">至</td>
                    <td class="td_35">
                      <el-input v-model.trim="currentRow.redLineWidthTo"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">通车日期</td>
                    <td class="td_85" colspan="3">
                      <el-date-picker style="width: 200px"
                                      v-model="currentRow.startTime"
                                      type="date"
                                      placeholder="选择时间">
                      </el-date-picker>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">设计阶段项目场地抗震设防烈度</td>
                    <td class="td_35" style="display: table-cell;vertical-align: middle">
                      <el-input v-model.trim="currentRow.designEarthQuake">
                        <template slot="append">°</template>
                      </el-input>
                    </td>
                    <td class="td_15">现阶段项目场地抗震设防烈度</td>
                    <td class="td_35" style="display: table-cell;vertical-align: middle">
                      <el-input v-model.trim="currentRow.nowEarthQuake">
                        <template slot="append">°</template>
                      </el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">路幅形式</td>
                    <td class="td_85" colspan="3">
                      <el-radio-group v-model="currentRow.roadWayType" v-for="item in EnumRoadWayTypeList " :key="item.name">
                        <el-radio :label="item.code">{{item.name}}</el-radio>
                      </el-radio-group>
                      <span style="display: block;" v-if="currentRow.roadWayType==5">( <el-input
                        style="width: 90%;border-bottom: 1px solid gray;margin-bottom: 10px"
                        v-model.trim="currentRow.roadWayTypeOther"></el-input>)</span>
                    </td>
                  </tr>
                  <tr class="roadWayWidthBox">
                    <td class="td_15">路幅宽度</td>
                    <td class="td_85" colspan="3">
                      <div class="roadWayWidth" v-if="currentRow.roadWayType==1">
                        <span style="display: block;width: 40%">    一幅路：（</span>
                        <p style="width: 50%"> A=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[0]" style="width: 80%;"></el-input>
                          m
                        </p>
                        ）
                      </div>
                      <div class="roadWayWidth" v-if="currentRow.roadWayType==2">
                        <span style="display: block;width: 40%">    两幅路：（</span>
                        <p style="width: 50%"> A1=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[0]" style="width: 40%;"></el-input>
                          m
                        </p>
                        <p style="width: 50%"> A2=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[1]" style="width: 40%"></el-input>
                          m
                        </p>
                        ）
                      </div>
                      <div class="roadWayWidth" v-if="currentRow.roadWayType==3">
                        <span style="display: block;width: 40%">    三幅路：（</span>
                        <p style="width: 50%"> A=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[0]" style="width: 40%;"></el-input>
                          m
                        </p>
                        <p style="width: 50%"> B=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[1]" style="width: 50%"></el-input>
                          m
                        </p>
                        <p style="width: 50%"> C=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[2]" style="width: 50%"></el-input>
                          m
                        </p>
                        ）
                      </div>
                      <div class="roadWayWidth" v-if="currentRow.roadWayType==4">
                        <span style="display: block;width: 40%">四幅路：（</span>
                        <p style="width: 50%"> A1=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[0]" style="width: 40%;"></el-input>
                          m
                        </p>
                        <p style="width: 50%"> A2=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[1]" style="width: 40%"></el-input>
                          m
                        </p>
                        <p style="width: 50%"> B=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[2]" style="width: 50%"></el-input>
                          m
                        </p>
                        <p style="width: 50%"> C=
                          <el-input type="number" v-model.number="currentRow.roadWayWidth[3]" style="width: 50%"></el-input>
                          m
                        </p>
                        ）
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">机动车道数</td>
                    <td class="td_85" colspan="3">
                      <el-radio-group v-model="currentRow.driveType" v-for="item in EnumDriveTypeList " :key="item.name">
                        <el-radio :label="item.code">{{item.name}}</el-radio>
                      </el-radio-group>
                      <p>车道数（
                        <el-input v-model.number="currentRow.roadCount" style="width: 20%" type="number"></el-input>
                        ）（1/2/3/4/5/6/7/8）车道
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">道路总长(公里)</td>
                    <td class="td_85" colspan="3">
                      (
                      <el-input v-model.number="currentRow.roadLength" type="number" style="width: 20%"></el-input>
                      ）KM
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">起点名称</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.startName"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">终点名称</td>
                    <td class="td_85" colspan="3">
                      <el-input v-model.trim="currentRow.endName" style="width: 20%"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">是否分段</td>
                    <td class="td_85" colspan="3">


                      分段数量:(<el-input type="number" v-model.number="currentRow.split"
                                      style="width: 20%"></el-input>
                      )

                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">沿线交叉口数量</td>
                    <td class="td_85" colspan="3">
                      数量:(
                      <el-input v-model.number="currentRow.junctionCount" type="number"
                                style="width: 20%"></el-input>
                      )个

                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">沿线立交数量</td>
                    <td class="td_85" colspan="3">
                      数量:(
                      <el-input v-model.number="currentRow.crossingCount" type="number"
                                style="width: 20%"></el-input>
                      )个

                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">是否公交专用道</td>
                    <td class="td_85" colspan="3">
                      <el-radio-group v-model="currentRow.hasBus" v-for="item in EnumSysBooleanList " :key="item.name">
                        <el-radio :label="item.code">{{item.name}}</el-radio>
                      </el-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15" style="display: table-cell;vertical-align: middle">区域地质构造及
                      不良地质简述
                    </td>
                    <td class="td_85" colspan="3">
                      <el-checkbox-group v-model="currentRow.quYuDiZhi">
                        <el-checkbox style="width: 200px" v-for="item in EnumQuYuDiZhiList" :key="item.name" :label="item.code">
                          {{item.name}}
                        </el-checkbox>
                      </el-checkbox-group>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_15">最近一次大中修
                      或改扩建时间
                    </td>
                    <td class="td_85" colspan="3" style="line-height: 60px">
                      <el-radio-group v-model="currentRow.repairType" v-for="item in EnumRepairTypeList " :key="item.code">
                        <el-radio :label="item.code">{{item.name}}</el-radio>
                      </el-radio-group>
                      <span v-if="currentRow.repairType!==0">
             /   (<el-input v-model.trim="currentRow.repairTime"
                            style="width: 14%"></el-input>
                )年
          </span>
                    </td>
                  </tr>
                  <!--          现场复核-->

                    <tr v-if="isReview">
                      <td class="td_100" colspan="4">现场复核（注：以下内容需现场核实是否有误）：
                      </td>
                    </tr>
                    <tr v-if="isReview">
                      <td class="td_15">路幅形式</td>
                      <td class="td_85" rowspan="6" colspan="3"
                          style="display:table-cell; vertical-align:middle;text-align: center">
                        <el-radio-group v-model="currentRow.matchType" v-for="item in  EnumMatchTypeList " :key="item.name">
                          <el-radio :label="item.code">{{item.name}}</el-radio>
                        </el-radio-group>

                      </td>
                    </tr>
                    <tr v-if="isReview">
                      <td class="td_15">路幅宽度</td>
                    </tr>
                    <tr v-if="isReview">
                      <td class="td_15">机动车道数</td>
                    </tr>
                    <tr v-if="isReview">
                      <td class="td_15">是否有公交专用
                        道
                      </td>
                    </tr>
                    <tr v-if="isReview">
                      <td class="td_15">分段数量</td>
                    </tr>
                    <tr v-if="isReview">
                      <td class="td_15">分段信息</td>
                    </tr>


                  <!--   现场路面及周围环境普查      -->
                  <tr>
                    <td class="td_100" colspan="4">现场路面及周围环境普查:
                    </td>
                  </tr>
                  <tr>
                    <td class="td_100 td_100_weight__500" colspan="4">路面类型及结构：
                      <el-input v-model="currentRow.mianCeng" style="width: 80%"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_100 td_100_weight__500" colspan="4">路面结构的设计使用年限（年）：
                      <el-input v-model="currentRow.useTime" style="width: 60%" type="number"></el-input>
                    </td>
                  </tr>
                  <!-- 路面病害-->
                  <tr>
                    <!--rowspan="13"-->
                    <td class="td_10" rowspan="5" style="display: table-cell;vertical-align: middle">路面病害</td>
                    <td class="td_45" colspan="2" style="display:table-cell; vertical-align:middle;text-align: center">
                      沥青混凝土路面
                    </td>
                    <td class="td_45" style="display:table-cell; vertical-align:middle;text-align: center">
                      水泥混凝土路面
                    </td>
                  </tr>
                  <tr>
                    <td class="td_45__noBottom" colspan="2">
                      <div v-for="item in EnumLiQingBingHaiList" :key="item.name">
                        <div style="width: 100%;border-bottom: 1px;solid-color: gray;border-bottom: 1px solid gray  ">
                          <el-checkbox-group v-model="currentRow.liQingBingHai">
                            <el-checkbox style="margin-left: 20px" :label="item.code">{{item.name}}
                            </el-checkbox>
                          </el-checkbox-group>

                          <span v-if="item.code==1" style="  width:60%;  font-size: 12px;">
                       线裂数量:(<el-input type="number"
                                       v-model.number="currentRow.liQingXianLie"
                                       style="width: 20%;padding-left: 10px"></el-input>)m
                      <br/> 网裂数量:(<el-input
                                            type="number" v-model.number="currentRow.liQingWangLie"
                                            style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==2" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input type="number" :disabled="currentRow.liQingBingHai.indexOf(2) > -1?false:true"
                                     v-model.number="currentRow.tuoPi" style="width:20%"></el-input>)m²
                   </span>
                          <span v-if="item.code==3" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     type="number" v-model.number="currentRow.cheZhe" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==4" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input type="number"
                                     v-model.number="currentRow.maMian" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==5" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input type="number"
                                     v-model.number="currentRow.junLie" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==6" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input type="number"
                                     v-model.number="currentRow.songSan" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==7" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input type="number"
                                     v-model.number="currentRow.liQingChenXian" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==8" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input type="number"
                                     v-model.number="currentRow.kengCao" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==9" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input type="number"
                                     v-model.number="currentRow.fanJiang" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                        </div>
                      </div>
                      <div style="width: 100%;height:42px;border-bottom: 1px solid gray"></div>
                      <div style="width: 100%;height:40px"></div>

                    </td>
                    <td class="td_45__noBottom td_45__noBottom_right">
                      <div v-for="item in EnumShuiNiBingHaiList" :key="item.name">
                        <div style="">
                          <el-checkbox-group v-model="currentRow.shuiNiBingHai">
                            <el-checkbox style="margin-left: 20px" :label="item.code">{{item.name}}
                            </el-checkbox>
                          </el-checkbox-group>
                          <span v-if="item.code==10" style="  width:80%;  font-size: 12px;">
                      <br/>  线裂数量:(<el-input
                                             v-model.number="currentRow.shuiNiXianLie" type="number"
                                             style="width: 20%;padding-left: 10px"></el-input>)m
                   </span>
                          <span v-if="item.code==11" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.duanBan" type="number" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==12" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.kengDong" type="number" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==13" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.banDiTuoKong" type="number"
                                     style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==14" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.poSui" type="number" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==15" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.cuoTai" type="number" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==16" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.poSun" type="number" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==17" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.qiPi" type="number" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==18" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.shuiNiChenXian" type="number"
                                     style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==19" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.gongQi" type="number" style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                          <span v-if="item.code==20" style="  width:60%;  font-size: 12px;">
                       数量:(<el-input
                                     v-model.number="currentRow.tianFengLiao" type="number"
                                     style="width:20%;padding-left: 10px"></el-input>)m²
                   </span>
                        </div>
                      </div>


                    </td>
                    <td>
                    </td>
                  </tr>
                  <!-- 检查井下沉/井边路面损坏-->
                  <tr>
                    <td class="td_85" colspan="3" style="display:table-cell; vertical-align:middle;text-align: center">
                      检查井下沉
                      数量:(
                      <el-input v-model.number="currentRow.jingXiaChen" type="number" style="width: 20%;padding: 0"></el-input>
                      )个
                    </td>

                  </tr>
                  <tr>
                    <td class="td_85" colspan="3" style="display:table-cell; vertical-align:middle;text-align: center">
                      井边路面损坏
                      数量（
                      <el-input v-model.number="currentRow.jingBianLu" type="number" style="width: 20%;padding: 0"></el-input>
                      ）m²
                    </td>

                  </tr>
                  <tr>
                    <td class="td_85" colspan="3" style="display:table-cell; vertical-align:middle;text-align: center">
                      上传照片
                      <upload-img v-model="currentRow.picList" :limit="4" :size-limit="4"
                                  ref="uploadPic"></upload-img>

                    </td>

                  </tr>
                  <!--道路两侧在 施建筑用地-->
                  <tr>
                    <td class="td_15" style="text-align: center">
                      道路两侧在<br/>
                      施建筑用地
                    </td>
                    <td class="td_85_borderBottom" style="padding-left: 20px" colspan="3">

                      <el-radio-group v-model="currentRow.isBuilding" v-for="item in BuildingBoolean"
                                      :key="item.name">
                        <el-radio :label="item.code">{{item.name}}</el-radio>
                      </el-radio-group>
                      <span style=" width: 70%">
                              数量（<el-input v-model.number="currentRow.building" style="width: 20%;padding: 0"
                                           type="number" :disabled="currentRow.isBuilding==0?true:false"></el-input>）

              </span>

                    </td>
                  </tr>

                </table>
                <!-- 在施信息-->

                <table class="tableBuilding">
                  <tr >
                    <td :rowspan="currentRow.buildingInformation.length+1" style="display: table-cell;vertical-align: middle;text-align: center">在施信息
                    </td>
                    <td class="td_22" style="width: 21.8%;display: table-cell;vertical-align:middle;text-align: center">
                      名称
                    </td>
                    <td class="td_25"> 在施时间</td>
                    <td class="td_25">降水措施
                    </td>
                    <td class="td_10" style="background: #1990FE">
                      <el-button icon="el-icon-plus" @click.stop="addBuilding" class="addBtn">添加用地</el-button>
                    </td>
                  </tr>
                  <tr v-for="(item,index) in currentRow.buildingInformation " :key="item.index">
                    <td class="td_15">
                      用地{{index+1}}
                    </td>
                    <td class="td_25">
                      <el-date-picker style="width: 200px"
                                      v-model="item.buildTime"
                                      type="date"
                                      placeholder="选择在施时间">
                      </el-date-picker>

                    </td>
                    <td class="td_25">
                      <el-input v-model="item.explanation"></el-input>
                    </td>
                    <td class="td_10">
                      <button class="btn_delete" @click="deleteBuilding(index)">删除</button>
                    </td>
                  </tr>


                  <!--道路重要场所和照明-->
                  <tr>
                    <td class="td_100" colspan="6" style="display:table-cell; vertical-align:middle;text-align: left">
                      道路两侧既有重要场所信息
                      <el-checkbox-group v-model="currentRow.importantBuilding">
                        <el-checkbox style="width: 200px" v-for="item in EnumImportantBuildingList" :key="item.name"
                                     :label="item.code">
                          {{item.name}}
                        </el-checkbox>
                      </el-checkbox-group>
                      <span v-if="currentRow.importantBuilding.indexOf(4)>-1">
             (<el-input v-model.trim="currentRow.importantBuildingOther"
                        style="width: 14%"></el-input>
                )
                </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_100" colspan="6" style="display:table-cell; vertical-align:middle;text-align: left">
                      城市照明及其附属设施:
                      <el-checkbox-group v-model="currentRow.lightBuilding">
                        <el-checkbox style="width: 200px" v-for="item in EnumLightBuildingList" :key="item.name"
                                     :label="item.code">
                          {{item.name}}
                        </el-checkbox>
                      </el-checkbox-group>
                      <span v-if="currentRow.lightBuilding.indexOf(4)>-1">
             (<el-input v-model.trim="currentRow.lightBuildingOther"
                        style="width: 14%"></el-input>
                )
                </span>
                    </td>
                  </tr>
                </table>
                <div style="text-align: right" class="userName">
                  普查人：
                  <el-input v-model="currentRow.userName" style="width: 20%; "></el-input>
                </div>
              </div>
              <!-- 操作按钮 -->
              <div class="demo-drawer__footer">
                <el-button @click="isShowDrawer=false" type="info">取 消</el-button>
                <el-button type="primary" class="common_btn-defalut" @click="validateAddForm">确 定</el-button>
                <!--        <el-button type="primary" class="common_btn-defalut" @click="CreateOneFormPage">打 印</el-button>-->
              </div>

            </el-drawer>
          </div>
        </div>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>

  </div>

</template>

<script>
  import XLoading from '@/components/animation/x-loading.vue'
  import RegionUnit from "@/components/region-unit2";
  import ItemMixins from "@/views/Pipeline/item.mixins";
  import Organization from '@/components/organization-unit/all3'
  import OrganizationTree from '@/components/organization-tree/all'
  import {
    baseUnitAdd,
    baseUnitUpdate,
    baseUnitQueryList,
  } from '@/services/model/pipeline'
  import Format from '@/utils/format'
  import print from "print-js";
  import UploadImg from '@/components/upload-img'
  import Enums from '@/utils/enums'

  export default {
    mixins: [ItemMixins,Enums],
    components: {RegionUnit, UploadImg,OrganizationTree,Organization,XLoading},
    data() {
      return {
        isLoading:false,
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        isReview:false,//判断是否是复核
        EnumMatchTypeList: [],
        EnumSysBooleanList: [],
        EnumImportantBuildingList: [],
        EnumLightBuildingList: [],
        EnumShuiNiBingHaiList: [],
        EnumLiQingBingHaiList: [],
        EnumRepairTypeList: [],
        EnumQuYuDiZhiList: [],
        EnumRoadLevelList: [], //道路等级
        EnumRoadWayTypeList: [], //路幅形式
        EnumDriveTypeList: [],//行驶方向
        activeName: '2',
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },

        tableList: [],
        isShowDrawer: false, // 是否显示弹窗
        wayWidth: [],
        currentRow: {
          lightBuilding: [],
          roadWayWidth: [],
          importantBuilding: [],
          shuiNiBingHai: [],
          areaId: '',
          deptTreeId: '',
          quYuDiZhi: [],
          liQingBingHai: [],
          buildingInformation: [
            {
              explanation: 'buildTime',
              buildTime: '2101'

            }, {
              explanation: 'buildTime',
              buildTime: '2101'

            }]
        }, // 新增数据

      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑普查单元基本信息表' : '新增普查单元基本信息表'
      },
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer),'yyyy年MM月dd日')
      },
    },
    methods: {
      //附属井删除
      deleteBuilding(index) {
        this.currentRow.buildingInformation.splice(index, 1)

      },

      //验证添加表单
      validateAddForm() {

        if (this.currentRow.id !== undefined) {
          this.baseUnitUpdate()
        } else {
          this.baseUnitAdd()
        }

        // }
      },
      //更新表单
      async baseUnitUpdate() {
        let res = await baseUnitUpdate(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '更新成功'
          })
          this.queryList()
          this.isShowDrawer = false
        }
      },
      //新增普查单元
      async baseUnitAdd() {
        let res = await baseUnitAdd(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功'
          })
          this.queryList()
          this.isShowDrawer = false
        }
      },
      //打印
      CreateOneFormPage() {
        this.text = ''
        print({
          printable: 'printJS-form1', //div id名 指定打印谁
          type: 'html',
          headerStyle: 'margin-top:-20px',
          // targetStyles: ['border', 'padding: 15px'],
          scanStyles: false,
          style: this.style // 表格样式
        })
      },
      //添加在施工信息
      addBuilding() {
        this.currentRow.buildingInformation.push({
          explanation: '',
          buildTime: ''

        })
      },

      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.form.page = 1
        this.queryList()
      },
      // 处理删除
      async handleDelete(row) {
        let res = await sensorDelete({
          id: row.id
        })
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '数据已删除'
          })
          this.queryList()
        }
      },
      // 新增数据按钮
      handleAdd() {
        this.currentRow = {
          lightBuilding: [],
          roadWayWidth: [],
          importantBuilding: [],
          shuiNiBingHai: [],
          areaId: '',
          deptTreeId: '',
          quYuDiZhi: [],
          liQingBingHai: [],
          buildingInformation: [
            {
              explanation: '',
              buildTime: ''
            },]
        }
        this.isReview= false
        this.isShowDrawer = true
        // this.$nextTick(() => {
        //   this.$refs.form.clearValidate()
        // })
      },
      // 编辑
      handleEdit(item) {
        this.currentRow = item
        this.isShowDrawer = true
        this.isReview= true

      },
      //列表数据
      async queryList() {
        this.isLoading = true
        let data = await baseUnitQueryList(this.form)
        this.tableList = data.data.records
        this.form.total = data.data.total
        this.isLoading = false
      }

    },
    mounted() {
      this.queryList()
      this.queryDictList(['EnumRoadLevel', 'EnumRoadWayType', 'EnumDriveType', 'EnumSysBoolean', 'EnumQuYuDiZhi', 'EnumRepairType', 'EnumLiQingBingHai', 'EnumShuiNiBingHai', 'EnumLightBuilding', 'EnumImportantBuilding', 'EnumMatchType'],
        ['EnumRoadLevelList', 'EnumRoadWayTypeList', 'EnumDriveTypeList', 'EnumSysBooleanList', 'EnumQuYuDiZhiList', 'EnumRepairTypeList', 'EnumLiQingBingHaiList', 'EnumShuiNiBingHaiList', 'EnumLightBuildingList', 'EnumImportantBuildingList', 'EnumMatchTypeList'])
    },
  }
</script>

<style lang="less" scoped>
  .drawerContent {
    width: 90%;
    margin: 5% auto;
    margin-bottom: 0;
    height: 780px;
    overflow-y: auto;
    overflow-x: hidden;

  }

  .drawerContent::-webkit-scrollbar {
    width: 0px;
    /*height: 4px;*/
  }

  /*设置按钮样式*/
  .demo-drawer_footer {
    width: 100%;
    height: 5% !important;
    text-align: right;
    box-sizing: border-box;
    padding-right: 10%;
  }

  /*  两列输入框*/

</style>
<style lang="less" scoped>
  table {
    width: 100%;
  }

  tr {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-right: 1px solid gray;
  }

  td {
    border: 1px solid gray;
    border-right: 0px;
    height: 40px;
    line-height: 40px;


    /deep/ .el-input input {
      border: 0px;
    }
  }

  .td_10 {
    width: 10% !important;
    text-align: center;
  }

  .td_15 {
    text-align: center;
    width: 15% !important;
  }

  .td_25 {
    text-align: center;
    width: 25% !important;
  }

  .td_35 {
    text-align: center;
    width: 35% !important;
  }

  .td_45 {
    width: 45% !important;
    border-bottom: 0px !important;
  }

  .td_45__noBottom > div > div {
    width: 100%;
    border-bottom: 1px solid gray
  }

  .td_45__noBottom /deep/ .el-input__inner {
    padding: 0px !important;
  }

  .td_45__noBottom > div:last-child div {
    border-bottom: 0px !important;

  }

  .td_85 {
    width: 85% !important;
    text-align: left;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .td_85_borderBottom {
    display: table-cell;
    vertical-align: middle;
    text-align: left
  }

  .td_100 {
    width: 100%;
    font-weight: 600;
    box-sizing: border-box;
    padding-left: 15px;
  }

  .td_100_weight__500 {
    font-weight: 500;
  }

  .td_45__noBottom_right {
    border-bottom: 0px;
  }

  .td_45__noBottom_right > div:last-child {
    border-bottom: 0px !important;
  }

  /*  设置单选框样式*/
  /deep/ .el-radio__input .el-radio__inner {
    border-radius: 0px;
  }

  /deep/ .el-radio__label {
    padding-left: 4px;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #1990FE;

  }

  /deep/ .el-radio {
    margin-right: 20px !important;
  }

  /deep/ .el-radio__input.is-checked /deep/ .el-radio__inner {
    background: #1990FE;

  }

  /*多选框样式修改*/
  .td_45__noBottom /deep/ .el-checkbox-group {
    height: 30px;
    line-height: 30px;
    width: 50%;
    display: inline-block;
  }

  /*  修改单选框框的样式*/
  /deep/ .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width: 10px;
    height: 5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 4px;
    left: 3px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
    /*background: red;*/
  }

  .roadWayWidth {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .roadWayWidthBox /deep/ .el-input__inner {
    padding: 0 5px;
    border-bottom: 1px solid gray !important;
    border-radius: 0px;
    margin-bottom: 5px;

  }

  .tableBuilding {
    border: 0px;


  }

  .tableBuilding td {
    border-top: 0px;
  }

  /*添加用地按钮样式*/
  .tableBuilding .common_btn-small {
    background: #1990FE !important;
    color: white;
    border-radius: 0px;
  }

  .tableBuilding .common_btn-small {
    span {
      color: white !important;
    }
  }

  /deep/ .el-icon-plus {
    color: white;
  }


  .userName /deep/ .el-input__inner {
    border: none;
    border-bottom: 1px solid gray;
    border-radius: 0px;
  }

  .addBtn {
    background: #1990FE !important;
    color: white;
  }
  /deep/.el-input-group__append,  /deep/.el-input-group__prepend{
  border: 0px;
    color: #1990FE;
    font-size: 120%;
    font-weight: 600;
  }
  .page_filter /deep/.el-input-group__prepend{
    background: #2196F3;
    color: white;
    font-size: 100%;
    font-weight: 500;
  }
  /deep/.el-upload--picture-card   .el-icon-plus{
    color: #404040 !important;
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }
</style>
